<template>
  <div class="execution-container">
    <!-- 顶部层级 -->
    <header class="header">
      <h2>执行计划</h2>
      <p class="current-dream">当前梦想: {{ currentDream || '暂无梦想' }}</p>
    </header>

    <!-- 次级导航层 -->
    <nav class="nav">
      <router-link to="/dream">梦想描绘</router-link>
      <router-link to="/tasks">分解设计</router-link>
      <router-link to="/plan">制定计划</router-link>
      <router-link to="/execute">执行计划</router-link>
    </nav>

    <!-- 核心内容层（三栏布局） -->
    <main class="main-content">
      <div class="task-list">
        <h3>任务列表</h3>
        <ul>
          <li v-for="(task, index) in tasks" :key="index">
            <div v-if="typeof task === 'object'">
              <p>任务名称: {{ task.taskName }}</p>
              <p>任务描述: {{ task.taskDescription }}</p>
              <p>需要时间: {{ task.requiredTime }} 分钟</p>
            </div>
            <div v-else>
              {{ task }}
            </div>
          </li>
        </ul>
      </div>

      <div class="plan-display">
        <h3>计划详情</h3>
        <ul>
          <li v-for="(plan, index) in plans" :key="index">
            <div v-if="typeof plan === 'object'">
              <p>计划名称: {{ plan.planName }}</p>
              <p>计划描述: {{ plan.planDescription }}</p>
              <p>开始时间: {{ plan.startTime }}</p>
              <p>结束时间: {{ plan.endTime }}</p>
              <p>关联任务: {{ plan.taskId }}</p>
            </div>
            <div v-else>
              {{ plan }}
            </div>
          </li>
        </ul>
        <p v-if="!plans.length">暂无计划</p>
      </div>

      <div class="execution-log">
        <h3>执行记录</h3>
        <select v-model="selectedPlan">
          <option value="">选择计划</option>
          <option v-for="(plan, index) in plans" :key="index" :value="plan.id">
            {{ typeof plan === 'object' ? plan.plan : plan }}
          </option>
        </select>
        <textarea v-model="newLog.minutes" placeholder="执行分钟数..."></textarea>
        <textarea v-model="newLog.startTime" placeholder="开始时间..."></textarea>
        <textarea v-model="newLog.endTime" placeholder="结束时间..."></textarea>
        <textarea v-model="newLog.summary" placeholder="总结改进..."></textarea>
        <button @click="addLog">添加记录</button>
        <div class="log-list">
          <div v-for="(log, index) in logs" :key="index">
            <div v-if="typeof log === 'object'">
              <p>记录ID: {{ log.id }}</p>
              <p>执行分钟数: {{ log.minutes }}</p>
              <p>开始时间: {{ log.startTime }}</p>
              <p>结束时间: {{ log.endTime }}</p>
              <p>总结改进: {{ log.summary }}</p>
              <p>关联计划: {{ log.planId }}</p>
            </div>
            <div v-else>
              {{ log }}
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部固定层 -->
    <footer class="footer">
      <p>© 2025 22215120229罗智韬 为梦成真开发者</p>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDream: localStorage.getItem('dream') || '',
      currentTask: localStorage.getItem('currentTask') || '',
      currentPlan: localStorage.getItem('currentPlan') || '',
      tasks: [],
      plans: [],
      logs: [],
      newLog: {
        zxID: 0,
        minutes: 0,
        startTime: '',
        endTime: '',
        summary: '',
        planId: localStorage.getItem('planId') || ''
      },
      selectedPlan: ''
    }
  },
  methods: {
    addLog() {
      if (this.newLog.minutes && this.newLog.startTime && this.newLog.endTime && this.newLog.summary && this.selectedPlan !== '') {
        this.newLog.id = Date.now();
        this.newLog.planId = this.selectedPlan;
        this.logs.push(this.newLog)
        this.saveLogs()
        this.newLog = {
          zxID: 0,
          minutes: 0,
          startTime: '',
          endTime: '',
          summary: ''
        }
      }
    },
    saveLogs() {
      localStorage.setItem('logs', JSON.stringify(this.logs))
    },
    removeLog(id) {
      const index = this.logs.findIndex(log => log.id === id);
      if (index !== -1) {
        this.logs.splice(index, 1);
        this.saveLogs();
      }
    }
  },
  mounted() {
    this.currentDream = localStorage.getItem('dream') || ''
    this.currentTask = localStorage.getItem('currentTask') || ''
    this.currentPlan = localStorage.getItem('currentPlan') || ''
    const savedTasks = localStorage.getItem('tasks')
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks)
    }
    const savedPlans = localStorage.getItem('plans')
    if (savedPlans) {
      this.plans = JSON.parse(savedPlans)
    }
    const savedLogs = localStorage.getItem('logs')
    if (savedLogs) {
      this.logs = JSON.parse(savedLogs)
    }
    this.newLog.planId = localStorage.getItem('planId') || ''
  }
}
</script>

<style scoped>
.execution-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px;
}
.header {
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  padding: 20px;
}
.current-dream {
  font-style: italic;
}
.nav {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.nav a {
  text-decoration: none;
  color: #333;
}
.main-content {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 20px;
  flex-direction: column;
}
@media (min-width: 600px) {
  .main-content {
    flex-direction: row;
  }
}

.task-list {
  flex: 1;
  padding: 20px;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  border-radius: 5px;
  backdrop-filter: blur(5px);
  min-width: 0;
}
.task-list ul {
  list-style: none;
  padding: 0;
  text-align: left;
}
.plan-display {
  flex: 1;
  padding: 20px;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  border-radius: 5px;
  backdrop-filter: blur(5px);
  min-width: 0;
}
.execution-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
  border-radius: 5px;
  backdrop-filter: blur(5px);
  min-width: 0;
}
.execution-log textarea {
  margin: 10px 0;
  padding: 10px;
}
.log-list {
  margin-top: 10px;
  max-height: 200px;
  overflow-y: auto;
}
.footer {
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, rgb(170, 207, 252), rgb(187, 208, 251), rgb(178, 236, 248));
}
</style>